import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import {
  APP_BLACK,
  INPUT_BACKGROUND_GREY,
  BORDER_GREY,
  APP_YELLOW,
  APP_GRAY,
  APP_BLUE
} from '../../../../constant/color';

export default StyleSheet.create({
  container: {
    alignItems: 'center',
    width: phonePx(320),
    height: phonePx(367),
    backgroundColor: '#fff',
    borderWidth: phonePx(2),
    borderColor: APP_BLACK,
    borderRadius: phonePx(12)
  },
  smallContainer: {
    height: phonePx(292)
  },
  title: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '400',
    lineHeight: phonePx(22),
    marginTop: phonePx(22)
  },
  loadInputs: {
    marginTop: phonePx(43)
  },
  inputPhone: {
    width: phonePx(270),
    height: phonePx(50),
    backgroundColor: INPUT_BACKGROUND_GREY,
    borderWidth: phonePx(1),
    borderColor: BORDER_GREY,
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '400',
    paddingHorizontal: phonePx(20)
  },
  loadInputVerify: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: phonePx(12)
  },
  inputVerify: {
    width: phonePx(142),
    height: phonePx(50),
    backgroundColor: INPUT_BACKGROUND_GREY,
    borderWidth: phonePx(1),
    borderColor: BORDER_GREY,
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '400',
    paddingHorizontal: phonePx(20)
  },
  verifyDesc: {
    fontSize: phonePx(16),
    color: APP_GRAY,
    fontWeight: '500'
  },
  verifyDescValid: {
    color: APP_BLACK
  },
  verify: {
    width: phonePx(115),
    height: phonePx(50),
    backgroundColor: BORDER_GREY,
    borderRadius: phonePx(8),
    justifyContent: 'center',
    alignItems: 'center'
  },
  verifyValid: {
    backgroundColor: APP_YELLOW
  },
  loginDesc: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500'
  },
  login: {
    width: phonePx(270),
    height: phonePx(50),
    backgroundColor: BORDER_GREY,
    borderRadius: phonePx(8),
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: phonePx(18)
  },
  loginValid: {
    backgroundColor: APP_YELLOW
  },
  changeLoginTypeDesc: {
    fontSize: phonePx(16),
    color: APP_BLUE,
    fontWeight: '500',
    lineHeight: phonePx(22)
  },
  changeLoginType: {
    position: 'absolute',
    bottom: phonePx(18),
    borderBottomWidth: phonePx(1),
    borderBottomColor: APP_BLUE
  }
});
